<template>
  <div style="height: 785px">

    <el-row :gutter="0" style="border-bottom: 1px solid #CCCCCC;margin: -20px;background: white;padding: 20px;height: 160px">
      <el-col :span="10" :offset="0" style="text-align: left">
        <div style="font-size: 40px;">{{name1}}</div>
        <el-dropdown>
        <el-button type="primary">
          最近还款日<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item >
              <el-row :gutter="0" style="border-bottom: 1px solid green;padding:10px;background-color:white" v-for="(o, index) in person" :key="o.id" :offset="index  > 0 ? 6 : 0" >
              {{o.loanrepayment.repaymentTime}}
            </el-row></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>


        <!--  <div style="">
          <el-row :gutter="0" style="border-bottom: 1px solid green;padding:10px;background-color:white" v-for="(o, index) in person" :key="o.id" :offset="index  > 0 ? 6 : 0" >
        {{o.loanrepayment.repaymentTime}}
          </el-row>
        </div>-->

      </el-col>

      <el-col :span="3" :offset="9">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </el-col>
    </el-row>

    <el-card class="box-card" style="border: 1px solid #CCCCCC;margin-top: 40px;">
      <el-row :gutter="0" style="border: 1px solid white;">
        <el-col :span="5" :offset="4">
          <el-link type="primary" @click="fun1">
            <div><i class="el-icon-bottom-right"></i></div>
            <div>借款记录</div>
          </el-link>
          <!--<el-button type="text " icon="el-icon-bottom-right" @click="fun1">借款记录</el-button>--><!--primary-->
        </el-col>
        <el-col :span="5" :offset="5">
          <el-link type="success" @click="fun2">
            <div><i class="el-icon-top-right"></i></div>
            <div>还款记录</div>
          </el-link>
          <!--<el-button type="text " icon="el-icon-top-right" @click="fun2" style="color: #39CE01">还款记录</el-button>--><!--success-->
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px">
      <el-row :gutter="0" style="border: 1px solid white;">
        <el-col :span="24" :offset="0" style="text-align: left">
          <div style="border-bottom: 1px solid #CCCCCC">
            <el-button type="text " icon="el-icon-c-scale-to-original">我的&nbsp;&nbsp;&nbsp;&nbsp;></el-button>
          </div>

          <div style="width: 50%;float: left">
            <el-button type="text " icon="el-icon-c-scale-to-original" style="padding-left: 30%" @click="login">登录&nbsp;&nbsp;&nbsp;&nbsp;></el-button>
          </div>

          <div style="width: 50%;float: left">
            <el-button type="text " icon="el-icon-timer"style="padding-left: 30%" @click="regist">注册&nbsp;&nbsp;&nbsp;&nbsp;></el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px">
      <el-row :gutter="0" style="border: 1px solid white;">
        <el-col :span="24" :offset="0" style="text-align: left">
          <div style="border-bottom: 1px solid #CCCCCC">
            <el-button type="text " icon="el-icon-c-scale-to-original">我的优惠&nbsp;&nbsp;&nbsp;&nbsp;></el-button>
          </div>
          <div style="border-bottom: 1px solid #CCCCCC">
            <el-button type="text " icon="el-icon-timer" @click="myQuota">我的额度&nbsp;&nbsp;&nbsp;&nbsp;><font size="1px" style="color: coral">查看详情</font></el-button>
          </div>
          <div style="">
            <el-button type="text " icon="el-icon-cold-drink">我的权益&nbsp;&nbsp;&nbsp;&nbsp;></el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>



  </div>
</template>
<!--

<script>
  import axios from  'axios';
    export default {
      name: "personal",
      data(){
        return {
        /*  username:'张宏宇',
          time1:'12月02日',*/

          form:{},
          id:1,
        };

      },
      methods: {

//查询个人额度和还款日
        findById: function (id) {
          /* this.dialogVisible=true*/
          /*  alert("人名"+res.data);*/
          alert("id"+id);
          axios.post("http://localhost:9999/credit-loanapplication/findById",{id:this.id}).then(res => {
            alert("人名"+res.data);
            this.form=res.data;
            console.log(res.data);
            this.form=res.data;
          })
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        fun1:function () {
//alert("zhy&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;");
          this.$router.push("/borrowRecord")
        },
        fun2:function () {
          this.$router.push("/repaymentRecord")
        }
      },
        fun1:function () {
          //alert("zhy&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;");
          this.$router.push("/borrowRecord")
        },
        fun2:function () {
          this.$router.push("/repaymentRecord")
        },
        regist:function () {
          this.$router.push("/registry")
        },
        login:function () {
          this.$router.push("/login")
        },
        myQuota:function () {
          this.$router.push("/myQuota")
        },

      mounted(){
          // name:"宋江",
          this.findById(this.$route.params.id);
        // this.findPartMessageByName();

      },

    }
</script>
-->

<script>
  import axios from  'axios';
    export default {
      name: "personal",
      data() {
        return {
          paymentStatus:"已结清",
          name1: '',
          time1: '',
          form: {},
          id: 1,
          borrowerId:1,
          username: '',
          person:[],
        };
      },
      methods: {
        findPartMessagePaymentStatus:function(){
          // alert("shiyan1");
          // alert("id"+borrowerId+",asdas"+paymentStatus);
          axios.post("http://localhost:9999/credit-personal/findPartMessagePaymentStatus", {borrowerId:this.borrowerId,paymentStatus:this.paymentStatus}).then(res=>{
            // alert("shiyan");
            this.person=res.data;
            console.log(res.data);//控制台数据
          })
        },
        regist: function () {
          this.$router.push("/registry")
        },
        login: function () {
          this.$router.push("/login")
        },
//查询个人额度和还款日
        findPartMessageById: function (id) {
          /* this.dialogVisible=true*/
          /*  alert("人名"+res.data);*/
         /* alert("id" + id);*/
          axios.post("http://localhost:9999/credit-personal/findPartMessageById", {id: this.id}).then(res => {
            this.name1 = res.data[0].name;
            this.limitnum = res.data[0].limitnum;
          })
        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        fun1: function () {
//alert("zhy--------");
          this.$router.push("/borrowRecord")
        },
        fun2: function () {
          this.$router.push("/repaymentRecord")
        },
      fun1: function () {
        //alert("zhy--------");
        this.$router.push("/borrowRecord")
      },
      fun2: function () {
        this.$router.push("/repaymentRecord")
      },
      myQuota: function () {
        this.$router.push("/myQuota")
      },
      },
      mounted(){
          // name:"宋江",
          this.findPartMessageById(1);/*this.$route.params.id*/
        this.findPartMessagePaymentStatus(1,"已结清");//name,paymentStatus

      },
    }
</script>

<style scoped>

</style>
